<template>
  <div class="bank">
    <div class="title">
      <img :src="'https://apimg.alipay.com/combo.png?d=cashier&t='+bankInfo.bankCode" :alt="bankInfo.bankName">
      <span class="label">{{ bankInfo.cardTypeName }}</span>
    </div>
    <p class="num">{{ cardNum | formatCardNum }}</p>
    <p class="status">绑定状态：<span :class="{'on': status === 1}">{{ status | formatStatus }}</span></p>
  </div>
</template>
<script>
import BIN from 'bankcardinfo';
export default {
  name: 'Bank',
  filters: {
    formatStatus(status) {
      return status === 0 ? '审核中' : '已绑定';
    },
    formatCardNum(num) {
      const numArr = num.split('');
      // eslint-disable-next-line no-undef
      const a = _.chunk(_.fill(numArr, '*', 0, numArr.length - 4), 5);
      // eslint-disable-next-line no-undef
      _.each(a, (v, i) => {
        // eslint-disable-next-line no-undef
        a[i] = _.join(v, '');
      });
      // eslint-disable-next-line no-undef
      return _.join(a, ' ');
    }
  },
  props: {
    cardNum: {
      type: String,
      required: true
    },
    status: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      bankInfo: {
        bankName: '',
        bankCode: '',
        cardType: '',
        cardTypeName: ''
      },
      errInfo: '',
      cardTypeMap: {
        DC: '储蓄卡',
        CC: '信用卡',
        SCC: '准贷记卡',
        PC: '预付费卡'
      }
    };
  },
  mounted() {
    BIN.getBankBin(this.cardNum).then(data => {
      this.bankInfo = data;
    }).catch(err => {
      console.log(err);
      this.errInfo = '银行卡信息不正确';
    });
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.bank{
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.12);
  width: 250px;
  height: 150px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px 0 13px;
    margin-top: 17px;
    img{
      display: inline-block;
      width: 126px;
    }
  }
  .label{
    color: #fff;
    font-size: $fontSizeSm;
    background-color: #5576B4;
    border-radius: 2px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    padding: 0 6px;
    text-align: center;
  }
  .num{
    font-size: $fontSizeLg;
    color: $textColorDark;
    font-weight: bolder;
    text-align: center;
    width: 100%;
    margin: 20px auto;
  }
  .status{
    color: $textColorBase;
    padding: 10px 0 10px 20px;
    border-top: 1px solid $borderColor;
    font-size: $fontSizeSm;
    line-height: calc(20 / 12);
    text-align: left;
    span{
      color: #E7A13D;
      &.on{
        color: #2EC290
      }
    }
  }
}
</style>
